<template>
  <div class="copyright-box" :class="{ 'template5-copyright-loop': route.meta.loopType }">
    <a name="topAnchor" id="topAnchor"></a>
    <div v-if="info.id">
      <exhibitsInfoTop :info="info" @follow="followType" @stepExhibit="stepExhibit" />
    </div>
    <div class="describe-box" v-if="(info.audio && info.audio.url) || info.description">
      <p
        class="describe-title describe-title-et"
        :style="{
          borderColor: colorList5[store.styleInfo.colorType - 1].fontColor,
          color: colorList5[store.styleInfo.colorType - 1].fontColor,
          fontFamily: store.styleInfo.fontFamily,
          marginTop: '0px',
        }"
      >
        展品描述
      </p>
      <div
        class="audeo-parent"
        v-if="info.audio && info.audio.url && AudioShow"
        :class="'audeo-parent' + store.styleInfo.colorType"
      >
        <playAudio
          :descriptionColor="colorList5[store.styleInfo.colorType - 1].fontColor"
          :playColor="colorList5[store.styleInfo.colorType - 1].auxiliaryColor"
          :timeColor="colorList5[store.styleInfo.colorType - 1].shmentColor3"
          :iconColor="colorList5[store.styleInfo.colorType - 1].auxiliaryColor"
          :nameColor="colorList5[store.styleInfo.colorType - 1].fontColor"
          :background="getAudioBgColor(store.styleInfo.colorType)"
          :name="info.audio.name"
          :url="info.audio.url"
          :description="info.audio.description"
        />
      </div>
      <!--  -->
      <!-- :style="{ background: store.styleInfo.auxiliaryColor }" -->
      <div
        class="describe-text"
        :class="{
          'describe-title-style1': store.styleInfo.colorType == 1,
          'describe-title-style2': store.styleInfo.colorType == 2,
          'describe-title-style3': store.styleInfo.colorType == 3,
        }"
        v-html="info.description"
      ></div>
    </div>
    <p
      class="describe-title describe-title-et"
      v-if="list.length > 0"
      :style="{
        borderColor: colorList5[store.styleInfo.colorType - 1].fontColor,
        color: colorList5[store.styleInfo.colorType - 1].fontColor,
        fontFamily: store.styleInfo.fontFamily,
      }"
    >
      相关展品
    </p>
    <div class="scroll-img-box" id="scroll-img-box">
      <div class="scroll-img-item" v-for="item in list" :key="item.id">
        <div class="scroll-img-item-images" @click="lookExhbits(item.id)">
          <div class="images-shadow"></div>
          <img :src="$filters.getLinkUrl(item.coverUrl, '?imageView2/1/w/280/format/webp')" alt="" />
        </div>
        <div
          class="scroll-img-item-text1"
          :style="{
            backgroundColor: colorList5[store.styleInfo.colorType - 1].fontColor,
            fontFamily: store.styleInfo.fontFamily,
          }"
        >
          <span
            :style="{
              color: colorList5[store.styleInfo.colorType - 1].themeColor,
            }"
            >{{ item.name }}</span
          >
        </div>
      </div>
    </div>

    <!-- <div class="describe-boxs" style="margin-top: 80px">
      <p 
        class="describe-title"
        :style="{
          marginBottom: '67px',
          borderColor: colorList5[store.styleInfo.colorType - 1].fontColor,
          color: colorList5[store.styleInfo.colorType - 1].fontColor,
          fontFamily: store.styleInfo.fontFamily,
        }"
      >  
        展品评论 
      </p>
      <comment :showpieceId="showpieceid" /> 
      <commentLists title="评论" :showpieceId="showpieceid" :projectId="projectId" />
    </div> -->
    <Comparison />
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
// import iconTab from './components/iconTab.vue';
import playAudio from '@/components/templatePlay/audio.vue';
// import Comparison from '../components/comparison/comparison.vue';
import Comparison from '@/components/comparison/comparison.vue';
import { settings } from '@/api/project/project';
import { pathList, pathListLoop } from '../index';
import { colorList5 } from '../../data';
import { handler } from '@/utils/minxin';
import { moduleShowpieces } from '@/api/exhibit/exhibit';
import { AddLike, AddFollow, correlation, projectExhibitions } from '@/api/door/door';
import commentLists from '../components/commentList.vue';
import comment from './exhibitsInfoChild/comment.vue';
import { ref, computed, reactive, onMounted, onActivated, onDeactivated, nextTick } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import heardTitle from './heardTitle.vue';
import exhibitsInfoTop from './exhibitsInfoChild/exhibitsInfoTop.vue';
import { useProjectStore } from '@/store';
import { useRoute, useRouter } from 'vue-router';
import { exhibitShowpiece } from '@/api/templates/templates';
import { commentList } from '@/api/comment/comment';
const AudioShow = ref(true);
const store = useProjectStore();
const projectId = Number(localStorage.getItem('projectId'));
const loading = ref(false);
const moduleId = ref(0);
const showpieceid = ref(0);
const exbitList = ref([]);
const info = ref({});
const list = ref([]);
const tabList = ref([
  { name: '展览首页', isShow: true, id: 0 },
  { name: '展品图库', isShow: true, id: 1 },
  { name: '文创商品', isShow: true, id: 4 },
  { name: '版权声明', isShow: true, id: 5 },
  { name: '学术研究', isShow: true, id: 3 },
  { name: '留言板', isShow: true, id: 2 },
]);
const parmas = reactive({
  pageSize: 99,
  pageNo: 1,
  id: 0,
  value: '',
  FilterId: 0,
});
const route = useRoute();
const router = useRouter();

const init = async () => {
  try {
    let { data } = await exhibitShowpiece(moduleId.value, showpieceid.value);
    info.value = data;
  } catch {}
};
const initList = async () => {
  try {
    moduleShowpieces(localStorage.getItem('projectId'), parmas).then((res) => {
      list.value = res.data.data;
    });
  } catch {}
};
const pathPublish = (e: number) => {
  console.log(e);
  let urlLink: string = '';
  // return;
  switch (e) {
    case 1:
      urlLink = route.meta.loopType ? pathListLoop[5] : pathList[5];
      break;
    case 4:
      urlLink = route.meta.loopType ? pathListLoop[8] : pathList[8];
      break;
    case 5:
      urlLink = route.meta.loopType ? pathListLoop[6] : pathList[6];
      break;
    case 3:
      urlLink = route.meta.loopType ? pathListLoop[7] : pathList[7];
      break;
    case 2:
      urlLink = route.meta.loopType ? pathListLoop[4] : pathList[4];
      break;
    default:
      urlLink = route.meta.loopType ? pathListLoop[0] : pathList[0];
      break;
  }
  router.push({
    name: urlLink,
    query: {},
  });
};
const initSetting = async () => {
  try {
    let arry = [];
    let res = await settings(localStorage.getItem('projectId'), 3);
    res.data.forEach((element) => {
      if (!element.config) {
        switch (element.type) {
          case 2:
            tabList.value[5].isShow = false;
            break;
          case 3:
            tabList.value[4].isShow = false;
            break;
          case 4:
            tabList.value[2].isShow = false;
            break;
            tabList.value[3].isShow = false;
            break;
        }
      }
    });

    // console.log(res);
  } catch {}
};
// initSetting();
const lookExhbits = async (id: number) => {
  showpieceid.value = id;
  AudioShow.value = false;
  nextTick(() => {
    AudioShow.value = true;
  });
  init();
  setTimeout(() => {
    const ele = document.getElementById('timeAxis-child-box-id'); // 获取元素
    const top = ele.offsetTop - 140; // 获取元素距离文档顶部的距离
    window.scrollTo({
      top: top,
      behavior: 'smooth', // 设置滚动的动画效果
    });
  }, 0);
  // let element = document.getElementById('timeAxis-child-box-id');
  // element.scrollIntoView({ behavior: 'smooth', block: 'start', alignToTop: true });
};
const followType = async (e?: number) => {
  try {
    let { statusCode } = await AddFollow({
      refType: 4,
      refId: info.value.id,
    });

    if (statusCode == 200) {
      info.value.isFollow = !info.value.isFollow;
      if (info.value.isFollow) {
        MessagePlugin.success('关注成功');
      } else {
        MessagePlugin.warning('您已取消关注');
      }
    }
  } catch (err) {
    console.log(err);
  }
};
const stepExhibit = (type: number) => {
  if (type === 1) {
    if (info.value.prev) {
      showpieceid.value = info.value.prev.value;
      // document.documentElement.scrollTop = 0;
      setTimeout(() => {
        const ele = document.getElementById('timeAxis-child-box-id'); // 获取元素
        const top = ele.offsetTop - 140; // 获取元素距离文档顶部的距离
        window.scrollTo({
          top: top,
          // behavior: 'smooth', // 设置滚动的动画效果
        });
      }, 0);
    } else {
      MessagePlugin.warning('暂无上一个展品');
      return;
    }
  } else {
    if (info.value.next) {
      showpieceid.value = info.value.next.value;
      // document.documentElement.scrollTop = 0;
      setTimeout(() => {
        const ele = document.getElementById('timeAxis-child-box-id'); // 获取元素
        const top = ele.offsetTop - 140; // 获取元素距离文档顶部的距离
        window.scrollTo({
          top: top,
          // behavior: 'smooth', // 设置滚动的动画效果
        });
      }, 0);
    } else {
      MessagePlugin.warning('暂无下一个展品');
      return;
    }
  }
  init();
};

const handlemouse = (e: string) => {
  const nav = document.getElementById(e);
  var flag;
  var downX; // 鼠标点击的x下标
  var scrollLeft; // 当前元素滚动条的偏移量
  nav.addEventListener('mousedown', function (event) {
    flag = true;
    downX = event.clientX; // 获取到点击的x下标
    scrollLeft = this.scrollLeft; // 获取当前元素滚动条的偏移量
    event.stopPropagation();
  });
  nav.addEventListener('mousemove', function (event) {
    if (flag) {
      // 判断是否是鼠标按下滚动元素区域
      var moveX = event.clientX; // 获取移动的x轴
      var scrollX = moveX - downX; // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离
      this.scrollLeft = scrollLeft - scrollX; // 鼠标按下的滚动条偏移量减去当前鼠标的滑动距离
      // console.log(scrollX);
      event.stopPropagation();
    }
  });

  // 鼠标抬起停止拖动
  nav.addEventListener('mouseup', function (event) {
    flag = false;
    event.stopPropagation();
  });
  // 鼠标离开元素停止拖动
  nav.addEventListener('mouseleave', function (event) {
    flag = false;
    event.stopPropagation();
  });
};
onMounted(() => {
  handlemouse('scroll-img-box');
  //   handler('scroll-img-box');
});
const getAudioBgColor = (type: number) => {
  let color = '';
  switch (type) {
    case 1:
      color = 'rgba(199, 159, 107, .2)';
      break;
    case 2:
      color = 'rgba(203, 185, 149, .2)';
      break;
    case 3:
      color = 'rgba(175, 167, 148, .2)';
      break;
  }
  return color;
};
onActivated(() => {
  AudioShow.value = false;
  nextTick(() => {
    AudioShow.value = true;
  });
  setTimeout(() => {
    const ele = document.getElementById('timeAxis-child-box-id'); // 获取元素
    const top = ele.offsetTop - 140; // 获取元素距离文档顶部的距离
    window.scrollTo({
      top: top,
      // behavior: 'smooth', // 设置滚动的动画效果
    });
  }, 100);
  moduleId.value = route.query.moduleId;
  parmas.id = Number(route.query.moduleId);
  showpieceid.value = Number(route.query.showpieceid);
  parmas.FilterId = Number(route.query.showpieceid);
  exbitList.value.push(route.query.id);
  init();
  initList();
});
</script>

<style lang="less" scoped>
.copyright-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  // overflow: scroll;
  width: 100%;
  min-height: 100%;
  padding-bottom: 100px;
  min-width: 1180px;
  user-select: none;
  :deep(.comparison-box) {
    right: 78px;
    bottom: 142px;
    .item-box {
      background: rgba(0, 0, 0, 0.2);
    }
  }
}
.describe-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px 0px;
  width: 1180px;
  // margin-top: 50px;

  .describe-text {
    width: 100%;
    font-size: 16px;

    font-family: PingFangSC, PingFang SC;

    color: #333333;
    line-height: 32px;
    margin-bottom: 30px;
    :deep(p) {
      text-indent: 2em;
      font-size: 16px;

      font-family: PingFangSC, PingFang SC;

      color: #333333;
      line-height: 32px;
    }
    :deep(span) {
      font-size: 16px;

      font-family: PingFangSC, PingFang SC;

      color: #333333;
      line-height: 32px;
    }
    :deep(div) {
      font-size: 16px;

      font-family: PingFangSC, PingFang SC;

      color: #333333;
      line-height: 32px;
    }
  }
}
.describe-text1 {
  :deep(p) {
    color: #e9d5b0;
  }
  :deep(span) {
    color: #e9d5b0;
  }
  :deep(div) {
    color: #e9d5b0;
  }
}
.describe-text2 {
  :deep(p) {
    color: #cbb995;
  }
  :deep(span) {
    color: #cbb995;
  }
  :deep(div) {
    color: #cbb995;
  }
}
.describe-text3 {
  :deep(p) {
    color: #e9d5b0;
  }
  :deep(span) {
    color: #e9d5b0;
  }
  :deep(div) {
    color: #e9d5b0;
  }
}
.btm-arrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  margin-top: 80px;
}
.arrow-item {
  display: flex;
  align-items: center;
  span {
    font-size: 17px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 32px;
    margin: 0 8px;
  }
}
.arrow-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 30px;
  border: 1px solid #333333;
}
.heard-textarea {
  width: 1180px;
  margin-top: 50px;
  margin: 0 auto;
}
.left-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  width: 180px;
  height: 56px;
  margin-top: 32px;
  span {
    position: relative;
    z-index: 99;
  }
}
.btn-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.textarea-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  // margin-top: 28px;
}
.bottom-text {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 24px;
}
.textarea-buttom {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 48px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 24px;
}
.comment-box {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}
.comment-title {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;

  color: #333333;
  line-height: 25px;
}
.comment-item {
  display: flex;
  margin-top: 50px;
}
.item-right {
  flex: 1;
  margin-left: 24px;
}
.item-right-title1 {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 24px;
}
.item-right-title2 {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 22px;
  margin-left: 10px;
}
.item-right-title3 {
  font-size: 17px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 32px;
  margin-top: 8px;
}
.t-list-item {
  background: transparent !important;
}
.logo-box {
  width: 160px;
  height: 80px;
  img {
    width: 160px;
    height: 80px;
  }
}
.describe-title {
  text-align: center;

  font-size: 34px;
  font-family: SourceHanSerifCN-Bold, SourceHanSerifCN;

  // color: #333333;
  line-height: 34px;
  margin-bottom: 30px;
  padding-bottom: 8px;
  border-bottom: 1px solid #fff;
}
.describe-title-style1 {
  color: #e9d5b0 !important;
  :deep(div) {
    font-size: 17px;
    font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;

    color: #e9d5b0 !important;
    line-height: 32px;
  }
  :deep(span) {
    font-size: 17px;
    font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;

    color: #e9d5b0 !important;
    line-height: 32px;
  }
  :deep(p) {
    font-size: 17px;
    font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;

    color: #e9d5b0 !important;
    line-height: 32px;
  }
}
.describe-title-style2 {
  color: #cbb995 !important;
  :deep(div) {
    font-size: 17px;
    font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;

    color: #cbb995 !important;
    line-height: 32px;
  }
  :deep(span) {
    font-size: 17px;
    font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;

    color: #cbb995 !important;
    line-height: 32px;
  }
  :deep(p) {
    font-size: 17px;
    font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;

    color: #cbb995 !important;
    line-height: 32px;
  }
}
.describe-title-style3 {
  color: #e9d5b0 !important;
  :deep(div) {
    font-size: 17px;
    font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;

    color: #e9d5b0 !important;
    line-height: 32px;
  }
  :deep(span) {
    font-size: 17px;
    font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;

    color: #e9d5b0 !important;
    line-height: 32px;
  }
  :deep(p) {
    font-size: 17px;
    font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;

    color: #e9d5b0 !important;
    line-height: 32px;
  }
}
.scroll-img-box {
  cursor: pointer;
  display: flex;
  justify-content: center;
  width: 100%;
  white-space: nowrap;
  overflow: auto;
  margin-top: 17px;
}
.scroll-img-box::-webkit-scrollbar {
  display: none;
}
.scroll-img-item {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  width: 280px;
  margin-right: 20px;
  .scroll-img-item-images {
    cursor: pointer;
    display: flex;
    position: relative;
    img {
      cursor: pointer;
      width: 280px;
      height: auto;
      min-height: 170px;
      object-fit: contain;
    }
    .images-shadow {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
    }
  }
  .scroll-img-item-images:hover {
    .images-shadow {
      display: flex;
    }
  }
  .scroll-img-item-text1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 280px;
    height: 50px;
    padding: 11px 16px;
    font-size: 18px;
    color: #ffffff;
    font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
    line-height: 28px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .scroll-img-item-text2 {
    margin-top: 12px;
    span {
      margin-left: 4px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 22px;
    }
  }
}
.describe-title-et {
  margin-bottom: 50px;
  margin-top: 80px;
}
.right-boxs {
  position: fixed;
  right: 0;
  top: 80px;
  z-index: 66;
  background: #faf5ed;
  padding: 20px 22px;
  width: 72px;
  span {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 20px;
  }
}
.btm-item {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  width: 32px;

  margin-top: 40px;
  span {
    text-align: center;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 20px;
  }
}
.btm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.btm-item-null {
  margin-top: 0px;
}
.describe-boxs {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.template5-copyright-loop {
  :deep(.comparison-box) {
    right: 30px;
  }
}
.audeo-parent {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 20px;
  :deep(.left-box-shadow) {
    opacity: 0.2;
  }
}
.audeo-parent1 {
  :deep(.t-slider__rail) {
    background: rgba(199, 159, 107, 0.2);
  }
  :deep(.t-slider__track) {
    background: #c79f6b;
  }
  :deep(.t-slider__button) {
    background: #c79f6b;
    border-color: #c79f6b;
  }
}
.audeo-parent2 {
  :deep(.t-slider__rail) {
    background: rgba(203, 185, 149, 0.2);
  }
  :deep(.t-slider__track) {
    background: #cbb995;
  }
  :deep(.t-slider__button) {
    background: #cbb995;
    border-color: #cbb995;
  }
}
.audeo-parent3 {
  :deep(.t-slider__rail) {
    background: rgba(175, 167, 148, 0.2);
  }
  :deep(.t-slider__track) {
    background: #afa794;
  }
  :deep(.t-slider__button) {
    background: #afa794;
    border-color: #afa794;
  }
}
:deep(.left-box-shadow) {
  opacity: 0.2;
}
:deep(.swap-box) {
  margin-right: 0;
}
</style>
